<template>
  <div id="unpacking-goods" >
    <div class="top">
      <span class="cancal" @click="cancal">取消</span>
      <span class="title">选择商品</span>
      <span class="sure" @click.stop="goOrderPage">确定</span>
    </div>
    <div class="tip">该盲盒可选 <span v-for="(item,index) in selectLevelGoods">[{{item.level_name}}]{{item.pivot.total}}个<block v-if="index !== selectLevelGoods.length - 1">, </block> </span> </div>
    <van-search v-model="searchVal" placeholder="搜索商品关键词"  @search="clickEvent" />
    <van-tabs v-model="active" title-active-color="#ED1818" color="#ED1818" @click="clickEvent" :ellipsis="false">
        <van-tab :name="citem.id" v-for="(citem,index) in selectLevelGoods" :key="index">
          <template #title> {{citem.level_name}}<span class="selected-name">(已选{{citem.goods.length}})</span> </template>
          <div class="meal-box" v-for="(item,index) in goodsData" :key="index">
            <van-checkbox v-model="item.checked" checked-color="#ee0a24" class="radio-style" @change="changeChecked" :disabled="(citem.pivot.total <= citem.goods.length && !item.checked) ? true : false"></van-checkbox>
            <img :src="item.thumb" alt="">
            <div class="text-detail">
              <span class="name">{{item.title}}</span>
              <div class="price">
                <span class="price-symbol">￥</span>
                <span class="price-val">{{item.price}}</span>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
  </div>
</template>

<script>
import index_controller from "./index_controller.js";
export default index_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#unpacking-goods {
  margin: 0.73rem 0 0 0;

  .top {
    margin: 0 0.83rem 1.58rem 0.83rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .cancal {
      font-size: 0.75rem;
      font-weight: 400;
      color: #999999;
    }

    .title {
      font-size: 0.95rem;
      font-weight: 400;
      color: #2B2B2B;
    }

    .sure {
      font-size: 0.75rem;
      font-weight: 400;
      color: #ED1818;
    }
  }

  .tip {
    margin: 0 0.83rem;
    font-size: 0.75rem;
    font-weight: 400;
    color: #FC6B14;
    text-align: initial;
  }

  .selected-name {
    zoom: 0.8;
  }

    .meal-box {
      display: flex;
      background: white;
      margin: 1.2rem 0.5rem;

      .radio-style {
        padding: 0 0.85rem;
        display: flex;
      }
      img {
        width: 3.5rem;
        height: 3.5rem;
        margin: 0;
      }
      .text-detail {
        display: flex;
        flex-direction: column;
        text-align: left;
        justify-content: space-between;
        margin: 0 0.525rem;
        .name {
          font-size: 0.7rem;
          font-weight: 500;
          color: #222222;
        }

        .price {
          .price-symbol {
            font-size: 0.55rem;
            font-weight: 500;
            color: #ED1818;
            zoom: 0.8;
          }

          .price-val {
            // font-size: 0.8rem;
            font-weight: 500;
            color: #ED1818;
          }
        }
      }
    }

  .van-search__content {
    border-radius: 0.875rem;
  }
}
</style>
